<template>
  <div class="User">
    <div style="margin-top: 20px; margin-left: 105px">
      <sapn>员工姓名：</sapn>
      <el-input placeholder="请输入员工姓名" style="width: 246px" v-model="params.name">
      </el-input>
      <el-button style="margin-left: 5px"><i class="el-icon-search" @click="load">查询</i>
      </el-button>
      <el-button style="margin-left: 5px"><i class="el-icon-back" @click="reset">返回</i>
      </el-button>
    </div>

    <div style="margin-left: 100px">
      <template>
        <el-table :data="tableData" border style="width: 90%;margin-top: 10px">
          <el-table-column prop="id" label="员工序号" width="80"></el-table-column>
          <el-table-column prop="name" label="员工姓名" width="180"></el-table-column>
          <el-table-column prop="account" label="账号" width="180"></el-table-column>
          <el-table-column prop="sex" label="性别" width="80"></el-table-column>
          <el-table-column prop="phone" label="手机号码" width="200"></el-table-column>
          <el-table-column prop="idNumber" label="身份证号" width="200"></el-table-column>
<!--          <el-table-column prop="status" label="账号状态" width="100">-->
<!--            <template slot-scope="scope">-->
<!--              <div-->
<!--                  class="tableColumn-status"-->
<!--                  :class="{ 'stop-use': String(scope.row.status) === '0' }"-->
<!--              >-->
<!--                {{ String(scope.row.status) === '0' ? '禁用中' : '启用中' }}-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                  size="mini"
                  @click="$router.push('/editUser?id='+scope.row.id)">编辑
              </el-button>
              <el-popconfirm
                  title="确定删除当前员工吗？"
                  @confirm="del(scope.row.id)"
              >
                <el-button style="margin-left: 15px"
                           size="mini"
                           type="danger" slot="reference">删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>


    <div class="block" style="margin-top: 20px;text-align: center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNumber"
          :page-size="params.pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import request from "../../utils/request";

export default {
  name: 'UserView',
  data() {
    return {
      tableData: [],
      total: 0,
      params: {
        id: '',
        name: '',
        sex:'',
        pageNumber: 1,
        pageSize: 10
      },
    }
  },
  created() {
    this.load()
  },

  methods: {
    load() {
      request.get('/user/page', {
        params: this.params,
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      })
    },
    reset() {
      this.params = {
        name: '',
        pageNumber: 1,
        pageSize: 10
      }
      this.load()
    },
    handleCurrentChange(pageNumber) {
      this.params.pageNumber = pageNumber
      this.load()
    },
    del(id) {
      request.delete("/user/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$notify.success("删除成功")
          this.load()
        } else {
          this.$notify.error(res.msg)
        }
      })
    }
  }
}
</script>